<template>
    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">

                    <div class="card-toolbar clearfix">
                        <form class="form-inline" onsubmit="return false;">
                            <div class="form-group">
                                <a class="btn btn-primary m-r-5" href="javascript:void(0)"
                                   @click="openDialogFormVisible"><i class="mdi mdi-plus"></i>添加音频素材</a>
                            </div>

                            <div class="form-group">
                                <input class="form-control" type="text" id="example-if-email"
                                       name="example-if-email" placeholder="音频标题" v-model="keyword"/>
                            </div>
                            <div class="form-group">
                                <el-select v-model="catId" placeholder="全部">
                                    <el-option
                                            v-for="item in selectOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-success" type="submit" v-on:click="search()">筛选</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-body" v-loading="loading">
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    @sort-change='sortChange'
                                    :default-sort="{prop: '_id', order: 'descending'}"
                            >
                                <el-table-column
                                        type="index"
                                        :index="indexMethod"
                                        label="ID"
                                        width="40">
                                </el-table-column>
                                <el-table-column
                                        prop="title"
                                        label="音频标题"
                                        width="180">
                                    <template slot-scope="scope">
                                        <a @click="handleEdit(scope.row)" style="cursor:pointer;">{{scope.row.title |
                                            titleFormatter}}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="body.timeLength"
                                        label="时长"
                                        width="60">
                                </el-table-column>
                                <el-table-column
                                        prop="catId"
                                        label="分类"
                                        :formatter="formatCatName"
                                        width="60">
                                </el-table-column>
                                <el-table-column
                                        prop="body.dateTime"
                                        label="发布日期"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="statusText"
                                        label="状态"
                                        width="60">
                                </el-table-column>
                                <el-table-column
                                        prop="wxView"
                                        label="浏览"
                                        sortable
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="shareNum"
                                        label="分享"
                                        sortable
                                        width="80">
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">

                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.row)">设置
                                        </el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.row)">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>


                            <el-dialog title="添加音频素材" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                                <el-form :model="form">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <el-form-item label="音频分类">
                                                <el-select v-model="form.catId" placeholder="全部">
                                                    <el-option
                                                            v-for="item in options"
                                                            :key="item.value"
                                                            :label="item.label"
                                                            :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </div>
                                        <div class="col-md-6">
                                            <el-form-item label="定时发布" class="dateTime">
                                                <el-date-picker
                                                        v-model="form.dateTime"
                                                        type="date"
                                                        @change="getDateTime"
                                                        format="yyyy-MM-dd"
                                                        placeholder="选择日期"
                                                >
                                                </el-date-picker>
                                            </el-form-item>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <el-form-item label="音频文件">
                                                <el-upload
                                                        class="avatar-uploader"
                                                        action="/api/upload"
                                                        :show-file-list="false"
                                                        accept="audio/mpeg"
                                                        :on-success="handleAudioSuccess"
                                                        :before-upload="beforeAudioUpload">
                                                    <audio v-if="form.videoUrl" :src="form.videoUrl"
                                                           controls="controls"></audio>
                                                    <el-button v-else size="small" type="primary">点击上传</el-button>
                                                    <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                                                </el-upload>
                                            </el-form-item>
                                        </div>
                                        <div class="col-md-6">
                                            <el-form-item label="背景图片">
                                                <el-upload
                                                        class="avatar-uploader"
                                                        action="/api/upload"
                                                        accept="image/gif, image/jpeg, image/png"
                                                        :show-file-list="false"
                                                        :on-success="handleImgUrlSuccess"
                                                        :before-upload="beforeAvatarUpload">

                                                    <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                </el-upload>
                                            </el-form-item>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <el-form-item label="音频标题" :label-width="formLabelWidth">
                                            <el-input
                                                    type="txt"
                                                    placeholder="请输入内容"
                                                    v-model="form.title" style="width:80%;">
                                            </el-input>
                                        </el-form-item>

                                    </div>

                                    <div class="row">
                                        <el-form-item label="音频文稿" :label-width="formLabelWidth">
                                            <el-input
                                                    type="textarea"
                                                    placeholder="请输入内容"
                                                    v-model="form.describe"
                                                    :rows="8"
                                                    maxlength="2000"
                                                    show-word-limit
                                                    style="width:80%;"
                                            >
                                            </el-input>
                                        </el-form-item>
                                    </div>


                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="submit">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import common from '../../api/public.js';
    export default {
        name: "GoodMNightComponent",
        data() {
            return {
                keyword: '',
                pageActive: true,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                activeIndex: 1,

                selectOptions: [{
                    value: -1,
                    label: '全部'
                }, {
                    value: 0,
                    label: '早安'
                }, {
                    value: 1,
                    label: '晚安'
                }],
                options: [{
                    value: 0,
                    label: '早安'
                }, {
                    value: 1,
                    label: '晚安'
                }],
                form: {
                    catId: 0,
                    dateTime: new Date(),
                    imageUrl: '',
                    videoUrl: '',
                    title: '',
                    describe: ''
                },
                dialogFormVisible: false,
                formLabelWidth: '82px',
                id: "",
                order:'desc',
                orderField:'_id',
                catId:-1
            }
        },
        methods: {
            ...common,
            search: function () {
                let self = this;
                let uri = 'article/video/cartoon/post-list';
                self.loading = true;

                let postData = {
                    type:6,
                    keyword: self.keyword,
                    page: self.currentPage,
                    limit: self.pageSize,
                    orderField: self.orderField,
                    order: self.order,
                    catId:self.catId,
                };
                axios.post(uri,postData).then(function (result) {
                    self.total = result.data.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.data.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            indexMethod(index) {
                return index + 1;
            },
            openDialogFormVisible() {
                this.dialogFormVisible = true;
                this.form.catId = 0;
                this.form.dateTime = new Date();
                this.form.imageUrl = '';
                this.form.videoUrl = '';
                this.form.title = '';
                this.form.describe = '';
                this.id = "";

            }, handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            handleSizeChange: function (pageSize) {
                this.pageSize = pageSize;
                this.search();
            },
            submit() {
                let self = this;
                let uri = "morning-night/store";
                /*if (!self.form.catId) {
                    self.$message.error("必须填写音频分类");
                    return;
                }*/
                if (!self.form.dateTime) {
                    self.$message.error("必须填写标题");
                    return;
                }
                if (!self.form.videoUrl) {
                    self.$message.error("必须上传音频文件");
                    return;
                }
                if (!self.form.imageUrl) {
                    self.$message.error("必须上传封面图");
                    return;
                }
                if (!self.form.title) {
                    self.$message.error("必须填写标题");
                    return;
                }
                if (!self.form.describe) {
                    self.$message.error("必须填写音频文稿");
                    return;
                }
                self.loading = true;
                let postData = {
                    catId: self.form.catId, dateTime: self.form.dateTime, videoUrl: self.form.videoUrl,
                    imageUrl: self.form.imageUrl, title: self.form.title, describe: self.form.describe
                };
                if (!self.id) {
                    self.store(uri,postData);
                } else {
                    uri = "morning-night/"+self.id;
                    self.update(uri,postData);
                }
            },
            store: function (uri, postData) { //保存
                let self = this;

                axios.post(uri,postData).then(function (result) {
                    self.dialogFormVisible = false;
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                    let data = error.response.data;
                    self.$message.error(data.error.msg);
                    //console.log(error);

                });
            },
            update: function (uri,postData) { //更新数据
                let self = this;
                axios.put(uri,postData).then(function (result) {
                    self.dialogFormVisible = false;
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                    let data = error.response.data;
                    self.$message.error(data.error.msg);

                });
            },
            sortChange(item) {
                let order = "asc";
                this.orderField = item.prop;
                console.log(item);
                if (item.order === 'descending') {
                    order = "desc";
                }
                this.order = order;
                this.search();
            },
            getDateTime(date) {
                this.form.dateTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            },
            handleImgUrlSuccess: function (response) {
                let self = this;
                if (response.code === 200) {
                    self.form.imageUrl = response.url
                }
                console.log(response)
            },
            beforeAvatarUpload: function (item) {
                console.log(item)
            },
            handleAudioSuccess: function (response) {
                let self = this;
                if (response.code === 200) {
                    self.form.videoUrl = response.url;
                }
                console.log(response)
            },
            beforeAudioUpload: function (item) {
                console.log(item)
            },
            formatCatName: function (row, column) {
                return row.catId === 0 ? '早安': '晚安';
            },
            handleDelete:function (row) {
                let self = this;
                let tipStr = "此操作将永久删除"+row.title+", 是否继续?";
                self.$confirm(tipStr, '视频删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequireArticleVideoCartoon(row._id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteRequire:function (id) {
                let self = this;
                let uri = "setting/good-mnight/" + id;

                axios.delete(uri).then(function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleEdit:function (row) {
                this.dialogFormVisible = true;

                this.form.catId = parseInt(row.catId);
                this.form.dateTime = row.body.dateTime;
                this.form.imageUrl = row.imageUrl;
                this.form.videoUrl = row.videoUrl;
                this.form.title = row.title;
                this.form.describe = row.describe;
                this.id = row._id;

                console.log(this.form);
            }
        },
        created: function () {
            this.search();
        },
        filters: {
            titleFormatter (title) {

                if (title.length >= 10) {
                    return title.substring(0, 10) + '...';
                }
                return title.length === 0 ? '--': title;
                //return this.filterLength(title,10);
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-upload__input {
        display: none;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
